<template>
  <div class="sample-change-modal">
      <a-upload
    name="avatar"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    :before-upload="beforeUpload"
    @change="handleChange"
  >
  <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
    <div v-else>
      <a-icon :type="loading ? 'loading' : 'plus'" />
      <div class="ant-upload-text">
        上传图片
      </div>
    </div>
  </a-upload>
  <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      style="margin-top: 30px; height: 400px"
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 5 }"
    >
      <span slot="pic">
        <img style="width: 50px; heigth: 50px" src="@/assets/ops1.png" />
      </span>
    </a-table>
  </div>
</template>

<script>
const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    photo: `Edward King ${i}`,
    author: 32,
    sample: `London, Park Lane no. ${i}`,
    date: "2021-7-31",
  });
}
export default {
    data () {
        return {
            imageUrl:"",
            selectedRowKeys:[],
            data,
            columns: [
        {
          title: "图片",
          dataIndex: "photo",
          scopedSlots: { customRender: "pic" },
          width:200
        },
        {
          title: "艺术家",
          dataIndex: "author",
          width:300
        },
        {
          title: "所属作品",
          dataIndex: "sample",
        },
        {
          title: "时间",
          dataIndex: "date",
        },
      ],
        }
    },
    methods:{
         onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    }
}
</script>

<style>
.sample-change-modal{
    height: 500px;
    overflow: scroll;
}
</style>